<!-- components/navigation/Sidebar.vue -->
<template>
  <aside class="sidebar-container" :class="{ collapsed: isCollapsed, 'mobile-open': isMobileOpen }">
    <!-- 可折叠侧边栏 -->
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapsed"
      :unique-opened="true"
      router
      class="sidebar-menu"
      background-color="#409eff"
      text-color="#ffffff"
      active-text-color="#ffd04b"
      @open="handleMenuOpen"
      @close="handleMenuClose"
    >
      <!-- 菜单项 -->
      <template v-for="item in filteredMenuItems" :key="item.path">
        <PermissionWrapper :requires-admin="item.meta?.requiresAdmin">
          <MenuItem 
            :menu="item"
            :icon-map="iconMap"
            :collapse="isCollapsed"
          />
        </PermissionWrapper>
      </template>
    </el-menu>
    
    <!-- 折叠按钮 -->
    <div class="collapse-trigger">
      <el-button 
        :icon="isCollapsed ? Expand : Fold" 
        circle 
        @click="toggleCollapse"
        class="collapse-btn"
      />
    </div>
  </aside>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed } from 'vue'
import { useAppStore } from '@/stores/appStore'
import { menuConfig } from '@/config/menu'
import MenuItem from '@/components/MenuItem.vue'
import PermissionWrapper from '@/components/navigation/PermissionWrapper.vue'
import { 
  DataAnalysis,
  TrendCharts,
  Monitor,
  Checked,
  Phone,
  FolderOpened,
  Document,
  Money,
  UserFilled,
  User,
  Setting,
  Connection,
  ShoppingBag,
  ShoppingCart,
  Management,
  Goods,
  Box,
  Coin,
  OfficeBuilding,
  List,
  DataLine,
  PieChart,
  Expand,
  Fold
} from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{
  isCollapsed?: boolean
  isMobileOpen?: boolean
}>(), {
  isCollapsed: false,
  isMobileOpen: false
})

const emit = defineEmits<{
  (e: 'toggle-collapse'): void
  (e: 'menu-open', index: string): void
  (e: 'menu-close', index: string): void
}>()

const appStore = useAppStore()

// 图标映射
const iconMap = {
  DataAnalysis,
  TrendCharts,
  Monitor,
  Checked,
  Phone,
  FolderOpened,
  Document,
  Money,
  UserFilled,
  User,
  Setting,
  Connection,
  ShoppingBag,
  ShoppingCart,
  Management,
  Goods,
  Box,
  Coin,
  OfficeBuilding,
  List,
  DataLine,
  PieChart,
  Expand,
  Fold
}

const activeMenu = computed(() => appStore.activeMenu)

const filteredMenuItems = computed(() => {
  console.log('当前用户信息:', appStore.user)
  console.log('是否为管理员:', appStore.user?.isAdmin)
  
  const filtered = menuConfig.filter(item => {
    // 检查权限
    if (item.meta?.requiresAdmin && !appStore.user?.isAdmin) {
      console.log('过滤掉需要管理员权限的菜单项:', item.name)
      return false
    }
    console.log('显示菜单项:', item.name, item)
    return true
  })
  
  console.log('过滤后的菜单项:', filtered)
  return filtered
})

const toggleCollapse = () => {
  emit('toggle-collapse')
}

const handleMenuOpen = (index: string) => {
  // 触发子菜单展开动画
  console.log('菜单展开:', index)
  emit('menu-open', index)
}

const handleMenuClose = (index: string) => {
  // 触发子菜单收起动画
  console.log('菜单关闭:', index)
  emit('menu-close', index)
}
</script>

<style scoped>
/* 侧边栏 */
.sidebar-container {
  width: 200px;
  background-color: #409eff;
  transition: width 0.3s ease, transform 0.3s ease;
  position: relative;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar-container.collapsed {
  width: 64px;
}

.sidebar-menu {
  flex: 1;
  border-right: none;
  background-color: transparent;
}

.collapse-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.1);
}

.collapse-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transition: all 0.3s ease;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #ffd04b;
  transform: rotate(15deg);
}

/* 子菜单样式 */
:deep(.el-sub-menu .el-sub-menu__title) {
  color: #ffffff;
}

:deep(.el-sub-menu .el-sub-menu__title:hover) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-menu-item) {
  color: #ffffff;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-menu-item.is-active) {
  background-color: #66b1ff;
  color: #ffd04b;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .sidebar-container {
    position: fixed;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    height: calc(100vh - 60px);
  }
  
  .sidebar-container.mobile-open {
    transform: translateX(0);
  }
}

/* 子菜单展开收起动画 */
:deep(.el-sub-menu .el-menu--inline) {
  transition: max-height 0.3s ease;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 桌面端 */
@media (min-width: 768px) {
  .sidebar-container {
    position: relative;
    z-index: 100;
  }
}
</style>